<div>
    <button data-controls-modal="modal-new-user" data-backdrop="true" class="btn success">Create new user</button>
</div>
<br />
<table class="zebra-striped">
    <tr>
        <th>Username</th>
        <th>E-mail</th>
        <th>Roles</th>
        <th>New password</th>
        <th></th>
    </tr>
    <?php foreach ($users as $user): ?>
        <tr>
        <form method="post">
            <input type="hidden" name="id" value="<?php echo $user->id; ?>" />
            <td><?php echo $user->username; ?></td>
            <td><input class="span4" type="email" name="email" value="<?php echo $user->email; ?>" required /></td>
            <td>
                <ul class="inputs-list">
                    <?php foreach ($roles as $role): ?>
                        <?php $checked = $user->has('roles', $role) ? ' checked' : ''; ?>
                        <li>
                            <label>
                                <input type="checkbox" name="roles[]" value="<?php echo $role->id; ?>"<?php echo $checked; ?> />
                                <span><?php echo $role->name; ?></span>
                            </label>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </td>
            <td><input class="span4" type="password" name="password" /></td>
            <td class="buttons">
                <button type="submit" class="btn primary" name="save_user" value="true">Save</button> 
                <button type="submit" class="btn error" name="remove_user" value="true">Remove</button> 
            </td>
        </form>
    </tr>
<?php endforeach; ?>
</table>
<?php echo $pagination->render('cpanel/pagination'); ?>

<div id="modal-new-user" class="modal hide fade">
    <div class="modal-header">
        <a href="#" class="close">&times;</a>
        <h3>New user</h3>
    </div>
    <form method="post">
        <div class="modal-body">
            <input type="hidden" name="action" value="add_user" />
            <div class="clearfix">
                <label>Username</label>
                <div class="input">
                    <input name="username" required />
                </div>
            </div>
            <div class="clearfix">
                <label>E-mail</label>
                <div class="input">
                    <input type="email" name="email" required />
                </div>
            </div>    
            <div class="clearfix">
                <label>Password</label>
                <div class="input">
                    <input type="password" name="password" required />
                </div>
            </div>
            <div class="clearfix">
                <label>Roles</label>
                <div class="input">
                    <ul class="inputs-list">
                        <?php foreach ($roles as $role): ?>
                            <li>
                                <label>
                                    <input type="checkbox" name="roles[]" value="<?php echo $role->id; ?>" />
                                    <span><?php echo $role->name; ?></span>
                                </label>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn primary" type="submit">Create</button>
        </div>
    </form>
</div>